<!--
 * @Descripttion: 销售单列表
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-02 15:03:05
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-07 10:46:25
 -->
<template>
  <div class="app-container">
    <el-alert
      title="结账说明："
      type="error"
      show-icon
    >
      结账日期不能小于系统启用日期：{{ dataObj.sysBalanceTime }}，
      不能小于等于上次结账日期：{{ dataObj.lastBalanceTime }} ！
      结账日期之前的数据只能查询，不能修改。
    </el-alert>
    <el-card shadow="never" class="margin-t2 oper-btn-card">
      <div class="clearfix">
        <el-form
          class="fl form-no-bottom"
          :inline="true"
          :model="dataObj"
          label-position="left"
          label-width="80px"
          @keydown.enter.native="btnBalance"
        >
          <el-form-item>
            <el-date-picker
              v-model="dataObj.balanceTime"
              value-format="yyyy-MM-dd hh:mm:ss"
              type="date"
            />
            <el-button
              type="primary"
              :loading="btnLoading.balance"
              @click="btnBalance"
            >
              结账
            </el-button>
            <el-button
              type="primary"
              :loading="btnLoading.unbalance"
              @click="btnUnBalance"
            >
              反结账
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <div class="margin-t2">
      <vxe-grid
        ref="table"
        class="grid"
        border
        resizable
        highlight-hover-row
        :row-class-name="(({row}) => { return row.isCancle === '1' ? 'is-cancle' : ''})"
        :loading="tableLoading.table"
        :columns="columnsData"
        :data="tableData.table"
      />
    </div>
    <div class="clearfix">
      <div class="pagination-container">
        <el-pagination
          background
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="pageInfo.rows"
          :page-sizes="[20,30,40]"
          :current-page.sync="pageInfo.page"
          :total="pageInfo.total"
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { listOrigin, getBalanceTime, balance, unbalance } from '@/api/setup/origin.js'
import moment from 'moment'
import { getBusinessTime } from '@/libs/util.js'

export default {
  name: 'CreditBalance',
  mixins: [oftenuse],
  data() {
    return {
      columnsData: [
        { field: 'balanceTime', title: '结账日期', width: 120,
          slots: {
            default: (params) => {
              const { row, column } = params
              return [getBusinessTime(row[column.property])]
            }
          }
        },
        { field: 'createTime', title: '操作时间', width: 180 },
        { field: 'username', title: '操作人', showOverflow: true, width: 200 }
      ]
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
    this.initData()
    this.listData()
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (vm.$route.params.refresh) {
        vm.listData()
      }
    })
  },
  methods: {
    btnBalance() {
      this.setBtnLoading('balance', true)
      this.balance().then(_ => {
        this.setBtnLoading('balance', false)
      })
    },
    btnUnBalance() {
      this.setBtnLoading('unbalance', true)
      this.unbalance().then(_ => {
        this.setBtnLoading('unbalance', false)
      })
    },
    // api
    initData() {
      const date = moment().format('YYYY-MM-DD HH:mm:ss')
      this.$set(this.dataObj, 'balanceTime', date)
      this.getBalanceTime()
      this.listData()
    },
    resetData() {
      this.initData()
    },
    balance() {
      const params = this.dataObj
      this.setBtnLoading('balance', true)
      return balance(params).then(res => {
        this.setBtnLoading('balance', false)
        if (res.data.flag) {
          this.$notify.success('结存成功！')
          this.resetData()
        } else {
          this.$notify.error({ title: '结存失败！', message: res.data.message })
        }
      })
    },
    unbalance() {
      return unbalance().then(res => {
        this.setBtnLoading('unbalance', false)
        if (res.data.flag) {
          this.$notify.success('反结存成功！')
          this.resetData()
        }
      })
    },
    listData(params = { data: this.searchData, page: this.pageInfo }) {
      this.setTableLoading('table', true)
      listOrigin(params).then(res => {
        this.setTableLoading('table', false)
        if (!res.data.flag) return
        const { records, total } = res.data.data
        this.setTableData('table', records)
        this.pageInfo.total = total
      })
    },
    getBalanceTime() {
      getBalanceTime().then(res => {
        if (res.data.flag) {
          const data = res.data.data || {}
          const { lastBalanceTime, sysBalanceTime } = data
          this.$set(this.dataObj, 'lastBalanceTime', lastBalanceTime)
          this.$set(this.dataObj, 'sysBalanceTime', sysBalanceTime)
        }
      })
    },
    // on
    onSizeChange(val) {
      this.pageInfo.current = 1
      this.pageInfo.size = val
      this.listData()
    },
    onCurrentChange(val) {
      this.pageInfo.current = val
      this.listData()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">

</style>
